<html>
<head>
    <meta charset="UTF-8">
    <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="static/css/components.css" rel="stylesheet" type="text/css"/>
    <link href="static/css/login.css" rel="stylesheet" type="text/css"/>
    <script src="static/js/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
    <body>
        <div class="content">
            <h3 class="form-title">商品列表浏览</h3>

            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>商品名</th>
                            <th>商品图片</th>
                            <th>商品描述</th>
                            <th>商品价格</th>
                            <th>商品库存</th>
                            <th>商品销量</th>
                        </tr>
                    </thead>
                    <tbody id="container">

                    </tbody>
                </table>

            </div>
        </div>
    </body>
    <script>
        // 定义全局商品 数组信息
        var g_itemList = [];
        jQuery(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://localhost:8090/item/list",
                //xhrFields 允许ajax跨域请求 授信, 与后端 ALLOW_CREDENTIALS, 遥相呼应
                xhrFields: {withCredentials: true},
                success: function (data) {
                    if (data.status === "Success") {
                        g_itemList = data.data;
                        reloadDom();
                    } else {
                        alert("获取商品信息未成功, 原因为" + data.data.errMsg);
                    }
                },
                error: function (data) {
                    alert("获取商品信息失败, 原因为" + data.responseText);
                }
            })
        });
        // 插入行列元素
        function reloadDom() {
            for (var i = 0; i < g_itemList.length; i++) {
                var itemVO = g_itemList[i];
                var dom = "<tr data-id='"+itemVO.id+"' id='itemDetail"+itemVO.id+"'>" +
                    "<td>" + itemVO.title + "</td>" +
                    "<td><img src='" + itemVO.imgUrl + "' style='width:100px; height:auto'/></td>" +
                    "<td>" + itemVO.description + "</td>" +
                    "<td>" + itemVO.price + "</td>" +
                    "<td>" + itemVO.stock + "</td>" +
                    "<td>" + itemVO.sales + "</td>" +
                    "</tr>";
                $("#container").append($(dom));
                $("#itemDetail" + itemVO.id).on("click", function(e){
                    window.location.href = "getitem.html?id=" + $(this).data("id");
                });
            }
        }
    </script>
</html>
